<template>
  <div class="root">
    <vue-particles
      color="#dedede"
      :particleOpacity="0.7"
      :particlesNumber="80"
      shapeType="circle"
      :particleSize="4"
      linesColor="#dedede"
      :linesWidth="1"
      :lineLinked="true"
      :lineOpacity="0.4"
      :linesDistance="150"
      :moveSpeed="3"
      :hoverEffect="true"
      hoverMode="grab"
      :clickEffect="true"
      clickMode="push"
    >
    </vue-particles>
    <div class="box">
      <el-form ref="form" :rules="rules" size="mini" :model="formData">
        <el-row class="title">
          <el-col :span="24">
            <p class="title">污染因素计算器</p>
          </el-col>
        </el-row>
        <el-row class="row-1">
          <el-col :span="12" class="left">
            <el-row class="row-1">
              <el-col :span="12"></el-col>
              <el-col :span="12">
                <p>原始数值</p>
              </el-col>
            </el-row>
            <el-row class="row-2">
              <el-col :span="12" class="col-1">
                <p>综合指数</p>
              </el-col>
              <el-col :span="12" class="col-2">
                <p>{{ toFixed(apiData1.api, 3) }}</p>
              </el-col>
            </el-row>
            <el-row class="row-3">
              <el-col :span="12" class="col-1">
                <p>AQI</p>
              </el-col>
              <el-col :span="12" class="col-2">
                <p>
                  {{ toFixed(aqiData1.aqi, 0)
                  }}<span>{{ verificationAir(aqiData1.aqi) }}</span>
                </p>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="12" class="right">
            <el-row class="row-1">
              <el-col :span="12">
                <p>原始数值</p>
              </el-col>
              <el-col :span="12">
                <p>变化值</p>
              </el-col>
            </el-row>
            <el-row class="row-2">
              <el-col :span="12" class="col-1">
                <p>{{ toFixed(apiData2.api, 3) }}</p>
              </el-col>
              <el-col :span="12" class="col-2">
                <p>{{ computeChange(apiData1.api, apiData2.api) }}</p>
              </el-col>
            </el-row>
            <el-row class="row-3">
              <el-col :span="12" class="col-1">
                <p>
                  {{ toFixed(aqiData2.aqi, 0)
                  }}<span>{{ verificationAir(aqiData2.aqi) }}</span>
                </p>
              </el-col>
              <el-col :span="12" class="col-2">
                <p>{{ computeChange(aqiData1.aqi, aqiData2.aqi) }}</p>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row class="row-2">
          <el-col :span="24">
            <el-row class="row-1">
              <el-col :span="6"></el-col>
              <el-col :span="6">
                <p>浓度值</p>
              </el-col>
              <el-col :span="6">
                <p>IAQI</p>
              </el-col>
              <el-col :span="6">
                <p>分指数</p>
              </el-col>
            </el-row>
            <el-row class="row-2">
              <el-col :span="24">
                <el-row class="row-1">
                  <el-col :span="6" class="col-1">
                    <p>PM2.5</p>
                  </el-col>
                  <el-col :span="6" class="col-2">
                    <el-form-item prop="pm251">
                      <el-input-number
                        class="input"
                        :precision="2"
                        :min="0"
                        clearable
                        placeholder="计算数值"
                        v-model.trim.number="formData.pm251"
                        style="width: 100%;text-align: center"
                      ></el-input-number>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6" class="col-3">
                    <p>{{ toFixed(aqiData1.pm25, 3) }}</p>
                  </el-col>
                  <el-col :span="6" class="col-4">
                    <p>{{ toFixed(apiData1.pm25, 3) }}</p>
                  </el-col>
                </el-row>
                <el-row class="row-2">
                  <el-col :span="6" class="col-1"></el-col>
                  <el-col :span="6" class="col-2">
                    <el-form-item prop="pm252">
                      <el-input-number
                        class="input"
                        :precision="2"
                        :min="0"
                        clearable
                        placeholder="对比数值"
                        v-model.trim.number="formData.pm252"
                        style="width: 100%;text-align: center"
                      ></el-input-number>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6" class="col-3">
                    <p>{{ toFixed(aqiData2.pm25, 3) }}</p>
                  </el-col>
                  <el-col :span="6" class="col-4">
                    <p>{{ toFixed(apiData2.pm25, 3) }}</p>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
            <el-row class="row-3">
              <el-col :span="24">
                <el-row class="row-1">
                  <el-col :span="6" class="col-1">
                    <p>PM10</p>
                  </el-col>
                  <el-col :span="6" class="col-2">
                    <el-form-item prop="pm101">
                      <el-input-number
                        class="input"
                        :precision="2"
                        :min="0"
                        clearable
                        placeholder="计算数值"
                        v-model.trim.number="formData.pm101"
                        style="width: 100%;text-align: center"
                      ></el-input-number>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6" class="col-3">
                    <p>{{ toFixed(aqiData1.pm10, 3) }}</p>
                  </el-col>
                  <el-col :span="6" class="col-4">
                    <p>{{ toFixed(apiData1.pm10, 3) }}</p>
                  </el-col>
                </el-row>
                <el-row class="row-2">
                  <el-col :span="6" class="col-1"></el-col>
                  <el-col :span="6" class="col-2">
                    <el-form-item prop="pm102">
                      <el-input-number
                        class="input"
                        :precision="2"
                        :min="0"
                        clearable
                        placeholder="对比数值"
                        v-model.trim.number="formData.pm102"
                        style="width: 100%;text-align: center"
                      ></el-input-number>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6" class="col-3">
                    <p>{{ toFixed(aqiData2.pm10, 3) }}</p>
                  </el-col>
                  <el-col :span="6" class="col-4">
                    <p>{{ toFixed(apiData2.pm10, 3) }}</p>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
            <el-row class="row-4">
              <el-col :span="24">
                <el-row class="row-1">
                  <el-col :span="6" class="col-1">
                    <p>SO2</p>
                  </el-col>
                  <el-col :span="6" class="col-2">
                    <el-form-item prop="so21">
                      <el-input-number
                        class="input"
                        :precision="2"
                        :min="0"
                        clearable
                        placeholder="计算数值"
                        v-model.trim.number="formData.so21"
                        style="width: 100%;text-align: center"
                      ></el-input-number>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6" class="col-3">
                    <p>{{ toFixed(aqiData1.so2, 3) }}</p>
                  </el-col>
                  <el-col :span="6" class="col-4">
                    <p>{{ toFixed(apiData1.so2, 3) }}</p>
                  </el-col>
                </el-row>
                <el-row class="row-2">
                  <el-col :span="6" class="col-1"></el-col>
                  <el-col :span="6" class="col-2">
                    <el-form-item prop="so22">
                      <el-input-number
                        class="input"
                        :precision="2"
                        :min="0"
                        clearable
                        placeholder="对比数值"
                        v-model.trim.number="formData.so22"
                        style="width: 100%;text-align: center"
                      ></el-input-number>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6" class="col-3">
                    <p>{{ toFixed(aqiData2.so2, 3) }}</p>
                  </el-col>
                  <el-col :span="6" class="col-4">
                    <p>{{ toFixed(apiData2.so2, 3) }}</p>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
            <el-row class="row-5">
              <el-col :span="24">
                <el-row class="row-1">
                  <el-col :span="6" class="col-1">
                    <p>NO2</p>
                  </el-col>
                  <el-col :span="6" class="col-2">
                    <el-form-item prop="no21">
                      <el-input-number
                        class="input"
                        :precision="2"
                        :min="0"
                        clearable
                        placeholder="计算数值"
                        v-model.trim.number="formData.no21"
                        style="width: 100%;text-align: center"
                      ></el-input-number>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6" class="col-3">
                    <p>{{ toFixed(aqiData1.no2, 3) }}</p>
                  </el-col>
                  <el-col :span="6" class="col-4">
                    <p>{{ toFixed(apiData1.no2, 3) }}</p>
                  </el-col>
                </el-row>
                <el-row class="row-2">
                  <el-col :span="6" class="col-1"></el-col>
                  <el-col :span="6" class="col-2">
                    <el-form-item prop="no22">
                      <el-input-number
                        class="input"
                        :precision="2"
                        :min="0"
                        clearable
                        placeholder="对比数值"
                        v-model.trim.number="formData.no22"
                        style="width: 100%;text-align: center"
                      ></el-input-number>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6" class="col-3">
                    <p>{{ toFixed(aqiData2.no2, 3) }}</p>
                  </el-col>
                  <el-col :span="6" class="col-4">
                    <p>{{ toFixed(apiData2.no2, 3) }}</p>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
            <el-row class="row-6">
              <el-col :span="24">
                <el-row class="row-1">
                  <el-col :span="6" class="col-1">
                    <p>CO</p>
                  </el-col>
                  <el-col :span="6" class="col-2">
                    <el-form-item prop="co1">
                      <el-input-number
                        class="input"
                        :precision="2"
                        :min="0"
                        clearable
                        placeholder="计算数值"
                        v-model.trim.number="formData.co1"
                        style="width: 100%;text-align: center"
                      ></el-input-number>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6" class="col-3">
                    <p>{{ toFixed(aqiData1.co, 3) }}</p>
                  </el-col>
                  <el-col :span="6" class="col-4">
                    <p>{{ toFixed(apiData1.co, 3) }}</p>
                  </el-col>
                </el-row>
                <el-row class="row-2">
                  <el-col :span="6" class="col-1"></el-col>
                  <el-col :span="6" class="col-2">
                    <el-form-item prop="co2">
                      <el-input-number
                        class="input"
                        :precision="2"
                        :min="0"
                        clearable
                        placeholder="对比数值"
                        v-model.trim.number="formData.co2"
                        style="width: 100%;text-align: center"
                      ></el-input-number>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6" class="col-3">
                    <p>{{ toFixed(aqiData2.co, 3) }}</p>
                  </el-col>
                  <el-col :span="6" class="col-4">
                    <p>{{ toFixed(apiData2.co, 3) }}</p>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
            <el-row class="row-7">
              <el-col :span="24">
                <el-row class="row-1">
                  <el-col :span="6" class="col-1">
                    <p>O3</p>
                  </el-col>
                  <el-col :span="6" class="col-2">
                    <el-form-item prop="o31">
                      <el-input-number
                        class="input"
                        :precision="2"
                        :min="0"
                        clearable
                        placeholder="计算数值"
                        v-model.trim.number="formData.o31"
                        style="width: 100%;text-align: center"
                      ></el-input-number>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6" class="col-3">
                    <p>{{ toFixed(aqiData1.o3, 3) }}</p>
                  </el-col>
                  <el-col :span="6" class="col-4">
                    <p>{{ toFixed(apiData1.o3, 3) }}</p>
                  </el-col>
                </el-row>
                <el-row class="row-2">
                  <el-col :span="6" class="col-1"></el-col>
                  <el-col :span="6" class="col-2">
                    <el-form-item prop="o32">
                      <el-input-number
                        class="input"
                        :precision="2"
                        :min="0"
                        clearable
                        placeholder="对比数值"
                        v-model.trim.number="formData.o32"
                        style="width: 100%;text-align: center"
                      ></el-input-number>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6" class="col-3">
                    <p>{{ toFixed(aqiData2.o3, 3) }}</p>
                  </el-col>
                  <el-col :span="6" class="col-4">
                    <p>{{ toFixed(apiData2.o3, 3) }}</p>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" align="center">
            <el-button
              size="mini"
              type="primary"
              style="width: 200px"
              @click="clear"
            >
              清空
            </el-button>
          </el-col>
          <el-col :span="12" align="center">
            <el-button
              size="mini"
              type="primary"
              style="width: 200px"
              @click="submit"
            >
              开始计算
            </el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
// 粒子特效
import VueParticles from "vue-particles";
import { doubleGetAqiAndApi, getAqiAndApi } from "../axios/api";
Vue.use(VueParticles);
// import { getAqiAndApi, doubleGetAqiAndApi } from "../axios/api";

export default {
  data() {
    return {
      rules: {
        pm251: [
          { required: true, message: "请填入PM2.5的值", trigger: "blur" }
        ],
        pm101: [{ required: true, message: "请填入PM10的值", trigger: "blur" }],
        so21: [{ required: true, message: "请填入SO2的值", trigger: "blur" }],
        no21: [{ required: true, message: "请填入NO2的值", trigger: "blur" }],
        co1: [{ required: true, message: "请填入CO的值", trigger: "blur" }],
        o31: [{ required: true, message: "请填入O3的值", trigger: "blur" }]
      },
      formData: {},
      apiData1: {
        pm25: "—",
        pm10: "—",
        so2: "—",
        no2: "—",
        co: "—",
        o3: "—",
        api: "—"
      },
      apiData2: {
        pm25: "—",
        pm10: "—",
        so2: "—",
        no2: "—",
        co: "—",
        o3: "—",
        api: "—"
      },
      aqiData1: {
        pm25: "—",
        pm10: "—",
        so2: "—",
        no2: "—",
        co: "—",
        o3: "—",
        aqi: "—"
      },
      aqiData2: {
        pm25: "—",
        pm10: "—",
        so2: "—",
        no2: "—",
        co: "—",
        o3: "—",
        aqi: "—"
      }
    };
  },
  methods: {
    getAqiAndApi() {
      this.$refs["form"].validate(isPass => {
        if (isPass) {
          let verificationSecondParameterResult = this.verificationSecondParameter();
          if (verificationSecondParameterResult) {
            doubleGetAqiAndApi(this.formData, (res1, res2) => {
              this.aqiData1 = res1.aqi;
              this.apiData1 = res1.api;
              this.aqiData2 = res2.aqi;
              this.apiData2 = res2.api;
            });
          } else {
            getAqiAndApi(this.formData, res => {
              this.aqiData1 = res.aqi;
              this.apiData1 = res.api;
              this.aqiData2 = {};
              this.apiData2 = {};
            });
          }
        }
      });
    },
    verificationSecondParameter() {
      if (
        !this.formData.pm252 &&
        !this.formData.pm102 &&
        !this.formData.so22 &&
        !this.formData.no22 &&
        !this.formData.co2 &&
        !this.formData.o32
      ) {
        return false;
      }
      if (!this.formData.pm252) {
        this.formData.pm252 = this.formData.pm251;
      }
      if (!this.formData.pm102) {
        this.formData.pm102 = this.formData.pm101;
      }
      if (!this.formData.so22) {
        this.formData.so22 = this.formData.so21;
      }
      if (!this.formData.no22) {
        this.formData.no22 = this.formData.no21;
      }
      if (!this.formData.co2) {
        this.formData.co2 = this.formData.co1;
      }
      if (!this.formData.o32) {
        this.formData.o32 = this.formData.o31;
      }
      return true;
    },
    toFixed(string, fixed) {
      if (string && "—" !== string) {
        return string.toFixed(fixed);
      }
      return "—";
    },
    verificationAir(value) {
      if (!value || "—" === value) return "";
      if (value <= 50) {
        return "优";
      } else if (value <= 100) {
        return "良";
      } else if (value <= 150) {
        return "轻度污染";
      } else if (value <= 200) {
        return "中度污染";
      } else if (value <= 200) {
        return "重度污染";
      } else if (value <= 200) {
        return "严重污染";
      }
    },
    computeChange(value1, value2) {
      if (!value1 || "—" === value1 || !value2 || "—" === value2) {
        return "—";
      }
      return (
        (Math.round(((value2 - value1) / value1) * 10000) / 100).toFixed(1) +
        "%"
      );
    },
    clear() {
      this.formData = {};
      this.apiData1 = {};
      this.aqiData1 = {};
      this.apiData2 = {};
      this.aqiData2 = {};
    },
    submit() {
      this.getAqiAndApi();
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus">
.root
  position: relative;
  width 100%
  height 100%
  background-color #004098
  > #particles-js
    position absolute
    top 0
    left 0
    width 100%
    height 100%
  > .box
    position absolute
    top 50%
    left 50%
    width 600px
    height 800px
    margin -400px -300px
    border-radius 5px
    background rgba(255,255,255,1)

    > .el-form
      > .title
        position absolute
        top -45px
        left 0
        width 100%
        height 45px
        > .el-col
          > .title
            text-align center
            line-height 45px
            font-size 28px
            color #fff
      > .row-1
        border-bottom 1px solid #eee
        p
          text-align center
          line-height 45px
        > .left
          position relative
        > .left::after
          content ""
          position absolute
          top 25px
          right 1px
          bottom 5px
          width 1px
          background-color #eee
        > .left
          > .row-1
            > .el-col
              p
                font-size 14px
                color #000
          > .row-2, >.row-3
            > .col-1
              p
                font-size 14px
                color #000
          > .row-2, >.row-3
            > .col-2
              p
                font-size 30px
                color #6BCD07
          >.row-3
            > .col-2
              p
                span
                  font-size 14px
        > .right
          > .row-1
            > .el-col
              p
                font-size 14px
                color #000
          > .row-2, >.row-3
            > .col-1
              p
                font-size 30px
                color #6BCD07
          >.row-3
            > .col-1
              p
                span
                  font-size 14px
          > .row-2, >.row-3
            > .col-2
              p
                font-size 14px
                color #000
      > .row-2
        margin-top 10px
        p
          text-align center
          line-height 33px
        >.el-col
          > .row-1
            > .el-col
              p
                font-size 14px
          > .row-2, >.row-3, >.row-4, >.row-5, >.row-6, >.row-7
            > .el-col
              > .row-1, >.row-2
                > .col-1, >.col-3, >.col-4
                  p
                    font-size 14px
                > .col-2
                  > .el-form-item

                    >>> .el-input__inner
                      font-size 16px
                      text-align center

.el-col
  min-height 1px
</style>
